<template>
	<view>
		<u-navbar class="custom-header" back-text="返回" title="其他入库" height="44" :custom-back="backToList">
			<view slot="right"><u-button type="primary" size="mini" style="margin-right: 20rpx;" @click="handleSave">保存</u-button></view>
		</u-navbar>
		<view class="text">入库单基本信息</view>
		<uni-card>
			<u-form labelPosition="left" :model="form" ref="uForm" label-width="200rpx">
				<u-form-item label="入库单编号:" prop="recptCode" borderBottom>
					<u-input v-model="form.recptCode" placeholder="保存后系统自动生成" :border="border"></u-input>
					<u-switch v-model="checked" @change="changeStatus"></u-switch>
				</u-form-item>
				<u-form-item label="入库单名称:" prop="recptName" borderBottom>
					<u-input v-model="form.recptName" placeholder="请输入入库单名称" :border="border"></u-input>
				</u-form-item>
				<u-form-item label="来料检查单:" prop="iqcCode" borderBottom>
					<u-input v-model="form.iqcCode" placeholder="请选择来料检查单" :border="border" :clearable="false" @input="searchData"></u-input>
					<view slot="right"><u-icon size="40" name="search" color="#2979ff" @click="searchData1"></u-icon></view>

					<u-picker v-model="show1" mode="selector" @confirm="confirm1" :range="iqcList1" range-key="iqcCode"></u-picker>
				</u-form-item>
				<u-form-item label="供应商:" prop="vendorName" borderBottom>
					<u-input v-model="form.vendorName" placeholder="选择检验单后自动填入" disabled :border="border"></u-input>
				</u-form-item>
				<u-form-item label="入库日期:" prop="recptDate" borderBottom>
					<u-input v-model="form.recptDate" placeholder="请选择日期" :border="border" type="select" @click="show2 = true"></u-input>
					<u-picker v-model="show2" mode="time" :params="params" @confirm="confirm2"></u-picker>
				</u-form-item>
			</u-form>
		</uni-card>
		<view v-if="recptId != null">
			<u-gap height="20" bg-color="#dedede"></u-gap>
			<view class="text">入库单明细信息</view>
			<u-row gutter="32" justify="center">
				<u-col span="10">
					<view><u-button type="success" @click="handleAdd(recptId)">新增</u-button></view>
				</u-col>
			</u-row>
			<uni-list>
				<uni-list-item v-for="(workReport, index) in workList" :key="index">
					<template slot="body">
						<uni-card is-full class="uni-list-card" padding="0" spacing="0">
							<view class="list-item-content">
								<view class="list-item-body">
									<view class="item-label">物料编码：</view>
									<view class="u-line-1 item-value">{{ workReport.itemCode }}</view>
								</view>
								<view class="list-item-body">
									<view class="item-label">物料编码：</view>
									<view class="u-line-1 item-value">{{ workReport.itemName }}</view>
								</view>
								<view class="list-item-body">
									<view class="item-label">单位：</view>
									<view class="u-line-1 item-value">{{ workReport.unitOfMeasure }}</view>
								</view>
								<view class="list-item-body">
									<view class="item-label">入库位置：</view>
									<view class="u-line-1 item-value">{{ workReport.warehouseName + '-' + workReport.locationName + '-' + workReport.areaName }}</view>
								</view>
								<view class="list-item-body">
									<view class="item-label">入库数量：</view>
									<view class="u-line-1 item-value">{{ workReport.quantityRecived }}</view>
								</view>
								<view class="flex-botton">
									<u-button class="btn btn1" type="primary" size="mini" @click="handleUpdate(workReport)">修改</u-button>
									<u-button class="btn" type="primary" size="mini" @click="handleDelete(workReport)">删除</u-button>
								</view>
							</view>
						</uni-card>
					</template>
				</uni-list-item>
			</uni-list>
			<!-- <u-row gutter="32" class="bottom-box" justify="center">
				<u-col span="10">
					<view><u-button type="primary" shape="circle" @click="navTo('/pages/sys/home/index')">提交</u-button></view>
				</u-col>
			</u-row> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				recptCode: null,
				recptName: '',
				vendorId: '',
				vendorName: '',
				poCode: '',
				iqcCode: '',
				iqcId: '',
				recptDate: '',
				vendorCode: ''
			},
			// 表单验证
			rules: {
				recptCode: [
					{
						required: true,
						message: '请输入入库单号',
						trigger: ['change', 'blur']
					}
				],
				recptName: [
					{
						required: true,
						message: '请输入入库单名称',
						trigger: ['change', 'blur']
					}
				],
				recptDate: [
					{
						required: true,
						message: '请选择入库单日期',
						trigger: ['change', 'blur']
					}
				]
			},
			border: false,
			show: false,
			show1: false,
			show2: false,
			checked: true,
			// 来料检测单参数
			param: {
				iqcCode: null
			},
			iqcList: [], //来料检测单列表
			iqcList1: [],
			//时间选择器参数
			params: {
				year: true,
				month: true,
				day: true
			},
			recptId: null, //入库单ID
			lineId: null, //入库单明细ID
			workList: [], //入库单明细列表
			content: '是否确认删除该入库单？',
			bol: '',
			selectData: {}
		};
	},
	onLoad(options) {
		//判断是否修改
		if (options.params != undefined) {
			this.recptId = options.params;
			this.getList();
		}
		this.getIqc();
		this.changeStatus(true);
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		//开关触发事件
		changeStatus(status) {
			if (status == true) {
				this.$u.api.getAutoCode({ ruleCode: 'ITEMRECPT_CODE' }).then(res => {
					this.form.recptCode = res;
				});
			} else {
				this.form.recptCode = null;
			}
		},
		getList() {
			const recptId = this.recptId;
			this.$u.api.buyStore
				.getBuyStoreDetail({ recptId })
				.then(res => {
					this.form = res.data;
				})
				.catch(err => {
					console.log(err);
				});
			this.$u.api.buyStore
				.getBuyStoreListLine({ recptId })
				.then(res => {
					this.workList = res.rows;
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 保存按钮操作
		handleSave() {
			console.log('recptId:', this.recptId);
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if (this.recptId == null) {
						this.$u.api.otherIn
							.handleOtherInAdd(this.form)
							.then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '新增成功',
										duration: 1000
									});
									this.backToList();
								}
							})
							.catch(err => {
								console.log(err);
							});
					} else {
						this.$u.api.otherIn
							.handleOtherInUpdata(this.form)
							.then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '修改成功',
										duration: 1000
									});
									this.backToList();
								}
							})
							.catch(err => {
								console.log(err);
							});
					}
				} else {
					console.log('验证失败');
				}
			});
		},
		//搜索
		searchData() {
			this.iqcList1 = [];
			this.param.iqcCode = this.form.iqcCode;
			this.getIqc();
		},
		searchData1() {
			this.show1 = true;
		},
		//获取来料检测单
		getIqc() {
			this.$u.api.iqc.getIqcList(this.param).then(res => {
				console.log(res);
				this.iqcList = res.rows;
				this.iqcList1 = this.iqcList;
				this.bol = false;
				this.$nextTick(() => {
					this.bol = true;
				});
			});
		},
		//来料检测单选择
		confirm1(e) {
			const num = parseInt(e.toString());
			this.selectData = this.iqcList1[num];
			this.form.iqcCode = this.selectData.iqcCode;
			this.form.iqcId = this.selectData.iqcId;
			this.form.vendorId = this.selectData.vendorId;
			this.form.vendorName = this.selectData.vendorName;
			this.form.vendorCode = this.selectData.vendorCode;
		},
		//时间选择
		confirm2(e) {
			this.form.recptDate = e.year + '-' + e.month + '-' + e.day;
		},
		// 新增
		handleAdd(data) {
			uni.navigateTo({
				url: '/pages/sys/home/components/work_bench/other-in/other_in_add'
			});
			let id = data;
			uni.setStorageSync('recptId', id);
		},
		//修改
		handleUpdate(row) {
			const ID = {
				recptId: row.recptId,
				lineId: row.lineId
			};
			uni.navigateTo({
				url: '/pages/sys/home/components/work_bench/other-in/other_in_add?params=' + JSON.stringify(ID)
			});
		},
		//删除
		handleDelete(val) {
			uni.showModal({
				title: '提示',
				content: '是否确认删除',
				success: res => {
					if (res.confirm) {
						console.log('用户点击确定');
						console.log(val);
						this.$u.api.otherIn
							.handleOtherInDeleteLine({ lineIds: val.lineId })
							.then(res => {
								if (res.code === 200)
									uni.showToast({
										title: '删除成功',
										duration: 1000,
										icon: 'none'
									});
								this.getList();
							})
							.catch(err => {
								console.log(err);
							});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//返回列表
		backToList() {
			uni.navigateTo({
				url: '/pages/sys/home/components/work_bench/other-in/other_in_list'
			});
		}
	}
};
</script>

<style scoped lang="scss">
.text {
	font-weight: bold;
	text-align: center;
	margin: 20rpx 0;
}
.item-card-title-layout {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin: 0 20rpx;
	padding: 20rpx 0;
	border-bottom: 1px solid rgb(214, 215, 217);

	.item-card-title {
		font-size: 32rpx;
		color: #5a5a5a;
	}

	.item-card-status {
		padding: 5rpx 8rpx;
		font-size: 26rpx;
		color: #fff;

		&.status-1 {
			background-color: #9a9998;
		}

		&.status-2 {
			background-color: #f9ae3d;
		}

		&.status-3 {
			background-color: #3c9cff;
		}

		&.status-4 {
			background-color: #5ac725;
		}
		&.status-5 {
			background-color: #f56c6c;
		}
	}
}

.list-item-content {
	padding: 20rpx;
	border-bottom: 1px solid rgb(214, 215, 217);

	.list-item-body {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		line-height: 56rpx;

		.item-label,
		.item-value {
			color: #6a6a6a;
			font-size: 28rpx;
		}
	}
}
.card-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	.card-actions-item {
		font-size: 25rpx;
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		&.withdraw {
			color: #f56c6c;
		}
		&.division {
			border-right: 1px solid rgb(214, 215, 217);
		}
	}
}
.flex-botton {
	display: flex;
	justify-content: flex-end;
}
.btn {
	margin: 0;
}
.btn1 {
	margin-right: 20rpx;
}
</style>
